<template>
    <a-layout class="layout" :style="{backgroundImage: 'url(' + bgImg + ')', backgroundSize:'100% 100%'}">
        <a-layout-content class="content">
            <div class="title">{{title}}</div>
            <a-card>
                <a-form :form="form" class="loginForm"
                      @keydown.native.enter.prevent="handleSubmit">
                    <a-form-item>
                        <a-input autoComplete="off" placeholder="用户名"
                               v-decorator="['loginName', {rules: [{ required: true, message: '请输入用户名' }]}]">
                            <a-icon slot="prefix" type="user"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input autoComplete="off" placeholder="密码" type="password"
                               v-decorator="['password', {rules: [{ required: true, message: '请输入密码' }]}]">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input>
                    </a-form-item>
                    <a-row>
                        <a-col span="16">
                            <a-form-item>
                                <a-input autoComplete="off" placeholder="验证码"
                                       v-decorator="['randomCode', {rules: [{ required: true, message: '请输入验证码' }]}]">
                                    <a-icon slot="prefix" type="picture"/>
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col span="8" style="padding-top: 4px; padding-left: 2px">
                            <img title="验证码" :src="this.rCodeUrl" @click="handleRCode"/>
                        </a-col>
                    </a-row>
                    <a-form-item>
                        <a-button type="primary" htmlType="submit" block @click="handleSubmit">登录</a-button>
                    </a-form-item>
                </a-form>
            </a-card>
        </a-layout-content>
    </a-layout>
</template>

<script>

    import {listCfg, submit} from '../service';

    const prefixRCodeUrl = './public/captcha.do?rnd=';
    export default {
        data() {
            return {
                title: '应用开发平台',
                bgImg: './public/img/login-2.jpg',
                rCodeUrl: prefixRCodeUrl + Math.random(), // 验证码地址
                form: this.$form.createForm(this)
            }
        },
        methods: {
            handleRCode() {
                this.rCodeUrl = prefixRCodeUrl + Math.random();
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        submit(values);
                    }
                });
            }
        },
        async created() {
            if (self !== top) {
                parent.window.location.replace(window.location.href);
            }

            // 获取应用系统名称和登录背景图片url
            let cfgs = await listCfg();
            cfgs.map((item, index) => {
                switch (item.key) {
                    case 'application.title':
                        this.title = item.value;
                        break;
                    case 'application.bg.img':
                        this.bgImg = item.value;
                        break;
                }
            });
        }
    }
</script>
